{% extends "base_theme/base.html" %}
{% load base_theme_filter %}
{% load static %}

{% block head_static %}
    <title>{{ article.title }} |{{ config.v2_blog_config.title }}</title>
{#    <link href="https://cdn.staticfile.org/jodit/3.2.55/jodit.min.css" rel="stylesheet">#}
    <link href="{% static '/base_theme/css/jodit.es2018.min.css' %}" rel="stylesheet">
    <link href="https://cdn.bootcss.com/froala-editor/2.8.1/css/froala_style.min.css" rel="stylesheet">
    {#    <script src="https://cdn.bootcss.com/jodit/3.1.94/jodit.min.js"></script>#}
{#    <script src="https://cdn.staticfile.org/jodit/3.2.55/jodit.min.js"></script>#}
    <script src="{% static '/base_theme/js/jodit.es2018.min.js' %}"></script>

    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="{% static '/base_theme/js/base_theme.js' %}"></script>

{% endblock %}
{% block columns_left %}
    <div class="column is-8 is-paddingless">
        <div id="detail_article" class="container" style="width: 100%">
            <div class="box detail_article_box long_words" style="padding: 0">
                <!-- 文章顶部 -->

                <div class="article-header">
                    <h1 class="title" style="margin-bottom: 16px">
                        {{ article.title }}
                    </h1>
                    <div style="margin-bottom: 6px;color: #696969;font-size: 15px">
                        <p>
                            <span class="icon" style="display: inline-block"><i class="far fa-folder"></i></span>
                            分类：
                            {% for c in article.category %}
                                {% if not forloop.first %},{% endif %}
                                <a class="article_header_a" href="{{ c.url }}">{{ c.name }}</a>
                            {% endfor %}
                        </p>
                    </div>
                    <div class="level">
                        <div class="level-left ">
                            <div class="level-item" style="justify-content:flex-start">
                                <div class="field is-grouped is-grouped-multiline" style="font-size: 15px">
                                    <span class="icon" style="display: inline-block;"><i
                                            class="far fa-calendar-alt"></i></span>
                                    <p> {{ article.created_time|date:"Y-m-d" }}</p>
                                    <span style="margin-left: 10px;margin-right: 8px;">|</span>
                                    <span class="icon"><i class="fas fa-eye"></i></span>
                                    <p style="margin-left: 2px">{{ article.meta_data.read_num }}</p>
                                    <span style="margin-left: 10px;margin-right: 8px;">|</span>

                                    <span class="icon"><i class="fas fa-comments"></i></span>
                                    <p style="margin-left: 2px;">
                                        <a href="#comment_header"
                                           class="red_a">评论：{{ article.meta_data.comment_num }}</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="level-right">
                            <div class="level-item" style="justify-content:flex-start;font-size: 15px">
                                <p>分享：</p>
                                <div class="dropdown is-hoverable">
                                    <div class="dropdown-trigger">
                                        <button class="button"
                                                style="border-width:0">
                                            <span class="icon" style="width: 28px;height: 28px">
                                                <svg width="200px" height="200px" viewBox="0 0 1024 1024" version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M514.027 1018.72c278.656 0 504.533-226.09 504.533-504.981 0-278.891-225.888-504.992-504.533-504.992S9.483 234.848 9.483 513.739c0 278.89 225.888 504.981 504.544 504.981z"
                                                fill="#55D081"/>
                                        <path
                                                d="M282.613 266.859h197.6c20.096 1.962 15.254 36.864 15.254 59.541v107.968c0 23.467 4.469 52.224-11.275 58.89-10.261 4.342-37.781 1.313-51.061 1.313H328.363c-24.224 0-57.291 5.696-61.003-15.051V281.91c2.71-7.371 7.467-12.705 15.253-15.051z m27.179 44.49v140.672h142.56V309.387H310.464c-0.768 0.106-0.725 1.034-0.672 1.962z m238.037-44.49h197.6c8.064 2.944 13.6 8.394 15.254 17.664v192.373c-1.814 7.99-6.038 14.827-13.92 17.013-12.896 3.584-34.315 0.662-49.739 0.662h-101.45c-15.307 0-37.985 3.178-50.4-0.662-17.537-5.418-12.598-39.189-12.598-62.816V330.325c0.021-27.274-6.059-59.658 15.253-63.466z m27.19 44.49v140.672h142.56V309.387H575.69c-0.779 0.106-0.726 1.034-0.672 1.962z m-200.235 41.227c19.85-3.701 35.467 9.547 35.808 27.477 0.448 23.67-24.043 36.662-43.104 26.838-21.803-11.254-20.373-49.174 7.296-54.315z m265.216 0c46.784-8.63 45.877 64.47 0 56.928-29.184-4.8-30.123-51.381 0-56.928zM478.89 760.224H283.276c-8.128-2.453-13.6-7.52-15.915-15.712v-196.95c1.93-5.76 6.39-12.49 13.259-14.4 12.981-3.605 34.186-0.66 49.738-0.66h101.451c14.997 0 36.821-3.307 50.4 0.66 18.368 5.355 13.259 38.582 13.259 62.166V699.36c-0.011 25.461 5.546 58.592-16.576 60.864z m-169.098-183.21v140.671h142.56V575.04H310.464c-0.768 0.117-0.725 1.045-0.672 1.973z m450.89-26.838v54.965c-1.546 18.528-0.223 39.915-0.66 59.542H618.794V632.64c-13.27-1.547-29.398-0.224-43.766-0.672-1.557 41.45-0.224 85.717-0.672 128.245h-25.866c-22.23-4.394-15.904-37.322-15.904-63.466V595.328c0-15.253-3.136-38.123 0.661-50.39 4.533-14.645 24.15-12.437 43.776-12.437h96.15v87.03h44.415c0.448-28.79-0.874-59.339 0.672-87.03 21.366-1.237 41.174-0.928 42.422 17.675z m-382.591 67.392c21.205-2.315 38.72 17.792 30.496 39.915-11.392 30.666-65.899 19.136-55.691-19.627 2.827-10.71 10.976-18.73 25.195-20.288z m288.437 142.656h-47.744c0.437-16.8-0.885-35.339 0.672-51.05h47.072v51.05z m94.155-51.04v33.365c-1.846 9.312-7.35 14.987-15.915 17.664h-33.813c0.437-16.789-0.886-35.338 0.672-51.029h49.056z"
                                                fill="#FFFFFF"/>
                                    </svg>
                                            </span>
                                        </button>
                                    </div>
                                    <div class="dropdown-menu" style="min-width:130px;text-align:center;">
                                        <div class="dropdown-content">
                                            <div class="dropdown-item">
                                                <p style="margin-bottom: 10px">扫码分享</p>
                                                <figure id="qrcode_url" class="image is-128x128">
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="dropdown is-right is-hoverable">
                                    <div class="dropdown-trigger">
                                        <button id="copy_url" class="button" style="border-width:0">
                                            <span class="icon" style="width: 28px;height: 28px">
                                                <svg width="200px" height="200px" viewBox="0 0 1024 1024" version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg">
                                        <path fill="#4893E7"
                                              d="M463.910749 620.510366c-21.025872 21.041222-41.987277 42.148959-63.00087 63.202461-8.590656 8.603959-17.663288 8.615215-26.162869 0.088004a27283.829883 27283.829883 0 0 1-34.743293-34.947953c-7.980765-8.04114-8.013511-17.214057 0.026606-25.27771a92071.161672 92071.161672 0 0 1 97.877192-98.018407c8.013511-8.011464 17.047258-7.936763 25.165146 0.055258 5.906523 5.811356 11.69332 11.744485 17.661241 17.494443 6.895037 6.639211 16.322757 6.576789 22.786983 0.016373 6.363941-6.452969 6.279007-16.139585-0.402159-23.0336-5.866614-6.057973-11.776208-12.091386-17.917069-17.863856-21.456684-20.170388-49.818639-19.620873-70.654176 1.230014-32.536021 32.55444-65.104787 65.072041-97.587596 97.67867-20.150946 20.227694-20.163225 49.669236-0.097214 70.013587 12.161994 12.325723 24.416086 24.558325 36.673248 36.786834 9.393951 9.374508 20.776186 13.986549 31.892361 14.23419 15.820314 0.023536 27.504424-5.047969 37.222763-14.716167 12.274558-12.212136 24.423249-24.552186 36.637431-36.823673 9.395998-9.438976 18.894326-18.776645 28.192086-28.31386 6.249331-6.408967 6.220678-16.004509 0.24764-22.280445-6.598278-6.934946-16.548908-6.79987-23.817451 0.475837z"/>
                                        <path fill="#4893E7"
                                              d="M601.992617 385.123334c-9.594519-9.602705-21.149693-14.475689-32.68747-14.536064-15.424294 0.061398-26.889417 4.944616-36.364209 14.384615-17.7165 17.648962-35.296901 35.428907-52.933583 53.154617-4.278443 4.296863-8.685823 8.478092-12.803607 12.928451-5.509481 5.950526-5.554506 14.790868-0.364297 20.945031 6.506181 7.712659 16.97358 7.78736 24.713868 0.034792 21.113877-21.152762 42.151006-42.38125 63.274092-63.522755 7.888667-7.896854 17.377786-7.834432 25.204032 0.016373a24745.669284 24745.669284 0 0 1 35.045167 35.258015c8.229428 8.292873 8.237615 17.277502-0.069585 25.600051a120251.10898 120251.10898 0 0 1-97.550756 97.66639c-8.225335 8.226359-17.144472 8.196683-25.492604-0.008186-5.806239-5.702885-11.464099-11.556197-17.324574-17.196661-7.170307-6.903224-16.431228-6.843872-23.054066-0.033769-6.307659 6.479575-6.119371 16.054651 0.623194 22.98755 6.087649 6.259564 12.223393 12.476149 18.530028 18.504446 19.580964 18.717294 49.102325 18.7132 68.123541-0.216941 33.456996-33.286104 66.829058-66.661236 100.074229-100.165303 19.48682-19.634176 19.215644-49.383734-0.291642-69.012794a18268.903411 18268.903411 0 0 0-36.651758-36.787858z"/>
                                        <path fill="#4893E7"
                                              d="M512 12.731976c-275.738042 0-499.268024 223.529983-499.268024 499.268024s223.529983 499.268024 499.268024 499.268024 499.268024-223.529983 499.268024-499.268024S787.738042 12.731976 512 12.731976z m200.011336 733.657332c0 18.9854-15.390525 34.376948-34.377971 34.376948H277.610692c-18.9854 0-34.377972-15.393595-34.377972-34.376948V346.365612c0-18.986423 15.392572-34.377972 34.377972-34.377972h400.025742c18.9854 0 34.375925 15.390525 34.375926 34.377972v400.023696z m68.753897-68.75492c0 18.9854-15.389502 34.378995-34.375925 34.378995h-1.458211V298.697963c0-10.841929-8.788154-19.629059-19.62906-19.62906H311.986617v-1.458211c0-18.986423 15.393595-34.375925 34.378995-34.375925h400.023696c18.986423 0 34.375925 15.389502 34.375925 34.375925v400.023696z"/>
                                    </svg>
                                            </span>
                                        </button>
                                    </div>
                                    <div class="dropdown-menu"
                                         style="min-width:130px;text-align:center;">
                                        <div class="dropdown-content">
                                            <div class="dropdown-item">
                                                点击复制链接
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 文章内容 -->
                <div class="content fr-view">
                    <p class="subtitle">
                        {{ article.content|safe }}
                    </p>
                </div>

                <br>

                <hr style="padding: 0;margin-top:10px;margin-bottom: 10px">

                <!-- 文章结尾作者标签 -->
                <div>
                    <div class="article_end">
                        <strong>转载请注明来源</strong>
                        <p>文章：<a href="{{ article.url }}">{{ article.title }}  </a></p>
                        <p>链接：<a id="copyright_url" href="{{ article.url }}">{{ article.url }}  </a></p>
                        <p>作者：<a href="/">{{ config.v2_blog_config.nickname }}  </a></p>

                    </div>
                </div>

                <!-- 文章标签 -->
                <div class=" tags" style="margin: 0">
                    标签：
                    {% for t in article.tags %}
                        <a style="margin-bottom: 0" class="tag" href="{% url 'app:tag_article' t.id %}">{{ t.name }}</a>
                    {% endfor %}
                </div>


            </div>
            <!-- 上一篇 下一篇 -->
            <nav class="level is-mobile ">
                <div class="level-left ">
                    {% if article.last_article %}
                        <div class="level-item" style="justify-content:flex-start">
                            <div class="dropdown is-up is-hoverable">
                                <div class="dropdown-trigger">
                                    <button class="button is-medium" style="box-shadow: 0 2px 3px rgba(10,10,10,.1);"
                                            aria-controls="last_article">
                                        <a style="color: #0a0a0a" href="{{ article.last_article.url }}">上一篇</a>
                                    </button>
                                </div>
                                <div class="dropdown-menu" id="copy_url_helper" role="menu"
                                     style="text-align:center;">
                                    <div class="dropdown-content">
                                        <div class="dropdown-item">
                                            {{ article.last_article.title }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                </div>
                <div class="level-right">
                    {% if article.next_article %}
                        <div class="level-item" style="justify-content:flex-start;font-size: 15px">

                            <div class="dropdown is-up is-right is-hoverable">
                                <div class="dropdown-trigger">
                                    <button class="button is-medium" style="box-shadow: 0 2px 3px rgba(10,10,10,.1);"
                                            aria-controls="last_article">
                                        <a style="color: #0a0a0a" href="{{ article.next_article.url }}">下一篇</a>
                                    </button>
                                </div>
                                <div class="dropdown-menu" id="copy_url_helper" role="menu"
                                     style="text-align:center;">
                                    <div class="dropdown-content">
                                        <div class="dropdown-item">
                                            {{ article.next_article.title }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    {% endif %}
                </div>
            </nav>

            {#评论列表#}
            <div class="box detail_article_box" style="padding: 0">
                <div class="article-header">
                    <strong id="comment_header" style="font-size: larger">本文共 {{ article.meta_data.comment_num }}
                        个回复</strong></div>
                <div id="comment">
                    {% for c in article.format_comments %}

                        <article id="comment-{{ c.comment.id }}" class="media">
                            <figure class="media-left img_head">
                                <p class="image is-60x60">
                                    <img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?s=60">
                                </p>
                            </figure>
                            <div class="media-content">
                                <div class="fr-view">
                                    <strong>{{ c.comment.nickname }}</strong>
                                    <br>
                                    <small style="color: #999;font-size: 12px">发布于：{{ c.comment.created_time }}</small>
                                    <br>
                                    {{ c.comment.content|safe }}
                                </div>
                                <nav class="level ">
                                    <div class="level-left"></div>
                                    <div class="level-right">
                                        <a href="#comment_help" class="level-item" article_id="{{ article.id }}"
                                           onclick="changeForm(202,{{ c.comment.id }},{{ c.comment.id }},'{{ c.comment.nickname }}')">
                                            <span class="icon is-small"><i class="far fa-comment-dots"></i></span>
                                            <p>&nbsp回复{% if c.children %}&nbsp({{ c.children|length }}){% endif %}</p>
                                        </a>
                                    </div>

                                </nav>


                                {% for child in c.children %}
                                    <article id="comment-{{ child.comment.id }}" class="media">

                                        <figure class="media-left is-hidden-touch img_head">
                                            <p class="image is-48x48">
                                                <img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?s=48">
                                            </p>
                                        </figure>
                                        <div class="media-content">
                                            <div class="fr-view">
                                                <strong>{{ child.comment.nickname }}</strong>
                                                <br>
                                                <small style="color: #999;font-size: 12px">
                                                    发布于：{{ child.comment.created_time }}</small>
                                                <br>
                                                {{ child.comment.content|safe }}

                                            </div>
                                            <nav class="level ">
                                                <div class="level-left"></div>
                                                <div class="level-right">
                                                    <a href="#comment_help" class="level-item"
                                                       article_id="{{ article.id }}"
                                                       onclick="changeForm(202,{{ c.comment.id }},{{ child.comment.id }},'{{ child.comment.nickname }}')">
                                                    <span class="icon is-small"><i
                                                            class="far fa-comment-dots"></i></span>
                                                        <p>&nbsp回复</p>
                                                    </a>
                                                </div>

                                            </nav>
                                        </div>
                                    </article>
                                {% endfor %}
                            </div>
                        </article>
                    {% endfor %}
                    <br>
                    {% if article.meta_data.comment_num != 0 %}
                        <hr>
                    {% endif %}
                    <p>
                        <strong style="font-size: larger;">发表评论</strong>
                        <span id="comment_help" style="color: rgb(44, 130, 201);">  (对文章评论)</span>
                    </p>

                    {#发布评论#}
                    <article id="comment_form_media" class="media" style="margin-top: 10px">

                        <figure class="media-left is-hidden-touch img_head">
                            <p class="image is-60x60">
                                <img src="https://secure.gravatar.com/avatar/ba501072452b828d7f3b33d8369e349e?s=60">
                            </p>
                        </figure>
                        <div class="media-content">

                            <div class="field">
                                <span id="form_error_msg" style="color: red">{{ form_error }}</span>
                                <form id="comment_form" action="{% url 'app:create_comment' %}" method="post">
                                    {% csrf_token %}

                                    <div class="field">
                                        <p class="control has-icons-left has-icons-right">
                                            <input class="input" type="text" placeholder="昵称" name="nickname"
                                                   maxlength="20" id="id_nickname">
                                            <span class="icon is-small is-left">
                                            <i class="fas fa-user"></i>
                                        </span>

                                        </p>
                                    </div>

                                    <div class="field">
                                        <p class="control has-icons-left has-icons-right">
                                            <input class="input" type="email" placeholder="邮箱" name="email"
                                                   maxlength="254" id="id_email">
                                            <span class="icon is-small is-left">
                                            <i class="fas fa-envelope"></i>
                                        </span>

                                        </p>
                                    </div>

                                    <div class="fieldWrapper">

                                        {{ comment_form.content }}
                                        {% if comment_form.content.help_text %}
                                            <p class="help">{{ comment_form.content.help_text|safe }}</p>
                                        {% endif %}
                                    </div>
                                    <input type="hidden" name="article_id" id="id_article_id" value="{{ article.id }}">
                                    <input type="hidden" name="root_id" id="id_root_id" value="-1">
                                    <input type="hidden" name="to_id" id="id_to_id" value="-1">
                                    <input type="hidden" name="type" id="id_type" value="201">
                                    <input type="hidden" name="err_anchor" value="#form_error_msg">
                                    <input type="hidden" name="success_anchor" value="#comment-">
                                    <div class="field" style="margin-top: 10px;display: flex">
                                        {{ comment_form.captcha }}
                                    </div>

                                    <div class="field" style="margin-top: 12px">
                                        <input type="submit" class="button is-rounded is-active" value="提交"/>
                                        <button type="button" class="button is-rounded is-active"
                                                style="margin-left: 12px" onclick="changeForm(201,-1,-1,'')">改为评论文章
                                        </button>
                                    </div>
                                </form>
                            </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.title = "{{ article.title }} | {{ config.v2_blog_config.title }}";
        var current_url = document.location.origin + document.location.pathname;
        $('#qrcode_url').qrcode({
            text: current_url,
            width: 128,
            height: 128,
        });
        $('#copyright_url').text(current_url);
        $('#copy_url').attr('data-clipboard-text', current_url);
        var clipboard = new ClipboardJS('#copy_url');

        clipboard.on('success', function (e) {
            e.clearSelection();
            layer.msg('复制成功', {icon: 1, time: 1000});
        });
        clipboard.on('error', function (e) {
            layer.msg('复制失败', {icon: 2, time: 1900});
        });
        var joditEditor = createCommentEditor('#id_content');
        var storage = window.localStorage;
        $('#comment_form').submit(function () {
            let nickname = $("#id_nickname").val();
            let email = $("#id_email").val();
            storage["nickname"] = nickname;
            storage["email"] = email;
            storage["content"] = joditEditor.getEditorValue();

        });

        $("#id_nickname").val(storage["nickname"]);
        $("#id_email").val(storage["email"]);


        $('.jodit_toolbar_btn-emoji')[0].className += ' is-hidden-touch';

        if ($('#form_error_msg').text() == '验证码错误') {
            joditEditor.setEditorValue(storage["content"] || '')

        }

        function changeForm(type, root_id, to_id, nickname) {
            if (type === 202) {
                joditEditor.value = '<p>回复 <span style="color: rgb(44, 130, 201);">' + nickname + ' </span>:</p>';
                //$('#id_content').froalaEditor('html.set', '<p>回复 <span style="color: rgb(44, 130, 201);">' + nickname + ' </span>:</p>');
                $('#id_type').val(type);
                $('#id_root_id').val(root_id);
                $('#id_to_id').val(to_id);
                $('#comment_help').html('  (回复 ' + nickname + ')');
            } else if (type === 201) {
                $('#id_type').val(201);
                $('#id_root_id').val(-1);
                $('#id_to_id').val(-1);
                $('#comment_help').html('  (对文章评论)');

            }
        }


        $('#comment_header').text('本文共 ' + $("[id^='comment-']").length + ' 个回复');
        $('.captcha').click(function () {
            $.getJSON("/captcha/refresh/", function (result) {
                $('.captcha').attr('src', result['image_url']);
                $('#id_captcha_0').val(result['key'])
            });
        });
        $('#id_captcha_1').css('margin-left', '10px');
    </script>

{% endblock %}
{% block columns_right %}
    {% include "base_theme/aside_right.html" %}

{% endblock %}

{% block after_body %}
    {% if config.v2_blog_config.baidu_auto_push %}
        <script>
            (function () {
                console.log(111)
                var bp = document.createElement('script');
                var curProtocol = window.location.protocol.split(':')[0];
                if (curProtocol === 'https') {
                    bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
                } else {
                    bp.src = 'http://push.zhanzhang.baidu.com/push.js';
                }
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(bp, s);
            })();
        </script>

    {% endif %}
{% endblock %}
